<template>
    <div>

        <div style="padding: 0px 0 ;">
            <el-input v-model="input" style="width:200px;" placeholder="根据宠物名称查找" suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <el-table :data="tableData" style="max-height: 500px;overflow: autos;">
            <el-table-column prop="image" label="宠物头像" width="100">
                <template slot-scope="{ row }">
                    <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="getImage(row.image)"
                        :preview-src-list="[`http://localhost:8081/common/download?name=${row.image}`]">
                        <div slot="error" class="image-slot">
                            <img src="" style="width: auto; height: 40px; border:none;">
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="petName" label="宠物名称" width="120">
            </el-table-column>
            <el-table-column prop="customerName" label="主人名称" width="120">
            </el-table-column>
            <el-table-column prop="userName" label="主治医师" width="120">
            </el-table-column>
            <el-table-column prop="userName" label="是否进行辅助检查" width="120">
                <template slot-scope="{ row }">
                    <div>
                        {{ row.status == 0 ? '否' : '是' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="diseaseAnalysis" label="病情描述" width="120">
            </el-table-column>
            <el-table-column prop="treatmentPlan" label="治疗方案" width="120">
            </el-table-column>
            <el-table-column prop="doctorTell" label="医嘱" width="120">
            </el-table-column>
            <el-table-column prop="createTime" label="医治时间" width="120">
            </el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <el-button type="warning" v-if="scope.row.payStatus == 0 && scope.row.status == 1" disabled=""
                        @click="">未支付</el-button>
                    <el-button type="warning" v-if="scope.row.payStatus == 0 && scope.row.status == 2" disabled=""
                        @click="">未支付</el-button>
                    <el-button type="warning" v-if="scope.row.payStatus == 1 && scope.row.status == 2" disabled=""
                        @click="">已完成</el-button>
                    <el-button type="success"  v-if="scope.row.payStatus == 1 && scope.row.status == 2"
                        @click="toTreatHistory(scope.row)">查看问诊历史</el-button>
                    <el-button type="info" v-if="scope.row.payStatus == 1 && scope.row.status != 2"
                        @click="reviewTreat(scope.row)">复诊</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 0 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <router-view></router-view>
        <el-dialog style="text-align: center;" title="问诊记录" :visible.sync="dialogFormVisible">
            <el-form :model="diagnosisForm">
                <el-form-item label="宠物名称" label-width="30px">
                    <el-input v-model="diagnosisForm.petName" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="主人名称" label-width="30px">
                    <el-input v-model="diagnosisForm.customerName" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" label-width="30px">
                    <el-input v-model="diagnosisForm.description" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="病情分析" label-width="30px" prop="diseaseAnalysis">
                    <el-input v-model="diagnosisForm.diseaseAnalysis" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="治疗方案" label-width="30px">
                    <el-input v-model="diagnosisForm.treatmentPlan" disabled type="textarea" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="diagnosisForm = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            tableData: null,
            currentPage4: 4,
            total: 0,
            page: 1,
            pageSize: 6,
            input: '',
            dialogFormVisible: false,
            treatDialogFormVisible: false,
            form: '',
            diagnosisForm: {},
            imageUrl: '',
            roles: []
        }
    },
    created() {
        this.load();
    },
    methods: {
        toTreatHistory(row){
            var id = row.id
            this.$router.push(`/treateHistory/${id}`)
            console.log("当前数据===>", row)
        },
        reviewTreat(row) {
            var id = row.id
            this.$router.push(`/reviewtreat/${id}`)
            console.log("当前数据===>", row)
        },
        cancelDialog() {
            this.dialogFormVisible = false;
            this.imageUrl = '';
        },
        getImage(image) {

            return "http://localhost:8081/common/download?name=" + image
        },
        onChange(file) {//校验图片格式
            if (file) {
                const suffix = file.name.split('.')[1]
                const size = file.size / 1024 / 1024 < 2
                if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                    this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                    this.$refs.upload.clearFiles()
                    return false
                }
                if (!size) {
                    this.$message.error('上传文件大小不能超过 2MB!')
                    return false
                }
                return file
            }
        },
        handleAvatarSuccess(res) {
            // 拼接down接口预览
            // if(response.code === 0 && response.msg === '未登录'){
            //   window.top.location.href = '/backend/page/login/login.html'
            // }else{

            this.imageUrl = "http://localhost:8081/common/download?name=" + res.msg//图片回显
            this.form.image = res.msg
            console.log(this.form.image);
            // }
        },
        deleteById(id) {
            this.request.delete(`/user/${id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.load()
                } else {
                    this.$message.success('删除失败')
                }
            })
        },
        save() {//新增提交数据方法
            var diagnosis = {}
            diagnosis.reserveId = this.form.id
            diagnosis.petId = this.form.petId
            diagnosis.customerId = this.form.customerId
            diagnosis.diseaseAnalysis = this.form.diseaseAnalysis
            diagnosis.treatmentPlan = this.form.treatmentPlan
            // console.log("当前form==>",this.form);
            this.request.post("/diagnosis", diagnosis).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load();
                } else {
                    this.$message.error("保存失败")
                }
            })
            this.dialogFormVisible = false
            this.load();
        },
        handEdit(row) {//打开编辑窗口
            this.form = row
            this.dialogFormVisible = true
            this.imageUrl = "http://localhost:8081/common/download?name=" + row.image
        },

        handAdd() {//打开新增窗口
            this.dialogFormVisible = true
            this.form = {}
            this.imageUrl = ''
        },
        reset() {//重置按钮方法
            this.input = "";
            this.load();
        },
        load() {//表格刷新
            var user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            this.request.get("/diagnosis/page/", {
                params: {
                   
                    userId: user.id,
                    page: this.page,
                    pageSize: this.pageSize,
                    name:this.input
                }
            }).then(res => {
                console.log("当前数据====>", res)
                this.tableData = res.data.records;
                this.total = res.data.total
            })
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.load();
        },
    }
}
</script>

<style sty>
.warning-row {
    background: oldlace;
}

.success-row {
    background: #f0f9eb;
}

.el-table::before {
    height: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>